<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .liItem{
            height:200px;
            margin-bottom: 20px;
            background: red;
            color: blue;
        }
        div{
            height:300px;
            background: red;
            width:400px;
        }

        .divItem{
            height:200px;
            width:300px;
            background: #000000;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            /*
               使用jQuery给li元素添加类

               注意：类名不带点
             */
            $("li").addClass("liItem");

            //移除指定的类，参数表示移除的类名
           // $("li:odd").removeClass("liItem");

            //不传参数，表示移除选择元素的所有类
            $("li:odd").removeClass();

            $("#btnChange").click(function(){
                /* var hasClass =  $("div").hasClass("divItem");
                console.log(hasClass);
                if(hasClass){
                    $("div").removeClass("divItem");
                }else{
                    $("div").addClass("divItem");
                }*/

                //切换指定的类名，参数表示要切换的类名称
               $("div").toggleClass("divItem");
            })
        })
    </script>
</head>
<body>
<ul>
    <li>这是第1个li元素</li>
    <li class="firstli">这是第2个li元素</li>
    <li>这是第3个li元素</li>
    <li>这是第4个li元素</li>
    <li>这是第5个li元素</li>
    <li>这是第6个li元素</li>
    <li>这是第7个li元素</li>
    <li>这是第8个li元素</li>
</ul>

<input type="button" value="切换场景" id="btnChange">
<div></div>
</body>
</html>